import React, {useEffect, useRef, useState} from "react"
import s from './style.module.less'
import {Icon, Pull} from 'zarm'
import BillItem from "../../components/BillItem";
import dayjs from "dayjs";
import {get,LOAD_STATE, REFRESH_STATE} from '@/utils'
import { Empty } from "@zarm-design/icons";
import PopupType from "../../components/PopupType";
import PopupDate from "../../components/PopDate";
import PopupAddBill from '../../components/PopupAddBill';
import CustomIcon from "../../components/CustomIcon";

const Home = () => {
    const typeRef = useRef()
    const monthRef = useRef()
    const addRef = useRef()
    const [currentSelect, setCurrentSelect] = useState({})
    const [list, setList] = useState([]); // 账单列表
    const [expense, setExpense] = useState(0)
    const [income, setIncome] = useState(0)
    const [currentTime, setCurrentTime] = useState(dayjs().format('YYYY-MM'));
    const [page, setPage] = useState(1);
    const [totalPage, setTotalPage] = useState(0)
    const [refreshing, setRefreshing] = useState(REFRESH_STATE.normal)
    const [loading, setLoading] = useState(LOAD_STATE.normal)

    useEffect(() => {
        getBillList()
    },[page,currentSelect,currentTime])

    // 获取账单
    const getBillList = async () => {
        const { data } = await get(`api/bill/list?page=${page}&page_size=5&date=${currentTime}&type_id=${currentSelect.id || 'all'}`);
        // 下拉刷新，重置数据
        if (page == 1) {
            setList(data.list)
        } else {
            setList(list.concat(data.list));
        }
        setExpense(data.totalExpense.toFixed(2))
        setIncome(data.totalIncome.toFixed(2))
        setTotalPage(data.totalPage)
        // 上滑加载状态
        setLoading(LOAD_STATE.success)
        setRefreshing(REFRESH_STATE.success)

    }

    // 请求列表数据
    const refreshData = () => {
        setRefreshing(REFRESH_STATE.loading)
        if (page != 1) {
            setPage(1)
        } else {
            getBillList()
        }
    }

    const loadData = () => {
        if (page < totalPage) {
            setLoading(LOAD_STATE.loading)
            setPage(page + 1)
        }
    }

    const toggle = () => {
        typeRef.current && typeRef.current.show()
    }

    const select = (item) => {
        setRefreshing(REFRESH_STATE.loading)
        setPage(1)
        setCurrentSelect(item)
    }

    const monthToggle = () => {
        monthRef.current && monthRef.current.show()
    }

    const selectMonth = (item) => {
        setRefreshing(REFRESH_STATE.loading)
        setPage(1)
        setCurrentTime(item)
    }

    const addToggle = () => {
        addRef.current && addRef.current.show()
    }

    return <div className={s.home}>
        <div className={s.header}>
            <div className={s.dataWrap}>
                <span className={s.expense}>总支出: <b>{expense}</b></span>
                <span className={s.income}>总收入: <b>{income}</b></span>
            </div>
            <div className={s.typeWrap}>
                <div className="s.left" onClick={toggle}>
                    <span className={s.title}>{currentSelect.name || '类型'}<Icon className={s.arrow} type="ArrowDown"/></span>
                </div>
                <div className={s.right}>
                    <span className={s.time} onClick={monthToggle}>{currentTime}<Icon className={s.arrow} type="ArrowDown"/></span>
                </div>
            </div>
        </div>
        <div className={s.contentWrap}>
            {
                list.length ? <Pull
                    animationDuration={200}
                    stayTime={400}
                    refresh={{
                        state: refreshing,
                        handler: refreshData
                    }}
                    load={{
                        state: loading,
                        distance: 200,
                        handler: loadData
                    }}
                >
                    {
                        list.map((item,index) => <BillItem
                            bill={item}
                            key={index}
                        />)
                    }

                </Pull> : <Empty/>
            }
        </div>
        <div className={s.add} onClick={addToggle}><CustomIcon type="tianjia"/></div>
       <PopupType ref={typeRef} onSelect={select}/>
       <PopupDate ref={monthRef} mode="month" onSelect={selectMonth}/>
       <PopupAddBill ref={addRef} onReload={refreshData}/>
    </div>
}

export default Home